<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/4/8
  Time: 11:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/font.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/xadmin.css">
    <script src="<%=request.getContextPath()%>/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/xadmin.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">

        <form class="layui-form">
            <!-- 正文区域 -->
            <section class="content"> <!--产品信息-->

                <div class="panel panel-default">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                        <legend>订单信息</legend>
                    </fieldset>
                    <div class="row data-type">

                        <div class="layui-inline">
                            <label class="layui-form-label">
                                订单编号
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="订单编号"
                                       value="${orders.orderNum }" readonly="readonly" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">
                                下单时间
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="下单时间"
                                       value='<f:formatDate value="${orders.orderTime}" pattern="yyyy-MM-dd HH:mm"/>' readonly="readonly" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">
                                路线名称
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="路线名称"
                                       value='${orders.product.productName }' readonly="readonly" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">
                                出发城市
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="出发城市"
                                       value='${orders.product.cityName }' readonly="readonly" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">
                                出发时间
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="出发时间"
                                       value="<f:formatDate value="${orders.product.departureTime}" pattern="yyyy-MM-dd HH:mm"/>" readonly="readonly" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">
                                出游人数
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="出游人数"
                                       value="${orders.peopleCount}" readonly="readonly" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                        <legend>游客信息</legend>
                    </fieldset>
                    <table id="dataList"
                           class="layui-table">
                        <thead>
                        <tr>
                            <th >人群</th>
                            <th >姓名</th>
                            <th >性别</th>
                            <th >手机号</th>
                            <th >证件类型</th>
                            <th >证件号码</th>
                        </tr>
                        </thead>
                        <tbody>

                        <c:forEach items="${orders.travellers}" var="traveller">

                            <tr>
                                <td>${traveller.credentialsType==0?"儿童":"成人" }</td>
                                <td>${traveller.name }</td>
                                <td>${traveller.sex }</td>
                                <td>${traveller.phoneNum }</td>
                                <td>${traveller.credentialsTypeStr }</td>
                                <td>${traveller.credentialsNum }</td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>

                <div class="layui-form-item">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                        <legend>会员信息</legend>
                    </fieldset>
                    <div class="row data-type">
                        <div class="layui-inline">
                            <label class="layui-form-label">
                                会员名称
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="会员名称"
                                       value="${orders.member.nickname }" readonly="readonly" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">
                                会员姓名
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="会员姓名"
                                       value="${orders.member.name }" readonly="readonly" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">
                                联系方式
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="联系方式"
                                       value="${orders.member.phoneNum }" readonly="readonly" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">
                                电子邮箱
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="电子邮箱"
                                       value="${orders.member.email}" readonly="readonly" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                        <legend>费用信息</legend>
                    </fieldset>

                    <div class="row data-type">
                        <div class="layui-inline">
                            <label class="layui-form-label">
                                支付方式
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="支付方式"
                                       value="${orders.payTypeStr }" readonly="readonly" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">
                                总金额
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="总金额"
                                       value="${orders.peopleCount*orders.product.productPrice }" readonly="readonly" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-tools text-center" style="text-align: center;margin-top: 15px">
                    <button type="button" class="layui-btn layui-btn-normal"
                            onclick="history.back(-1);">返回</button>
                </div>
            </section>
        </form>
    </div>
</div>
<script>layui.use(['form', 'layer','laydate'],
    function() {
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer
        ,laydate = layui.laydate;

        laydate.render({
            elem:"#departureTime",
            type:"date"
        })

        //自定义验证规则
        form.verify({
            nikename: function(value) {
                if (value.length < 5) {
                    return '昵称至少得5个字符啊';
                }
            },
            pass: [/(.+){6,12}$/, '密码必须6到12位'],
            repass: function(value) {
                if ($('#L_pass').val() != $('#L_repass').val()) {
                    return '两次密码不一致';
                }
            }
        });

        //监听提交
        form.on('submit(add)',
            function(data) {
                // console.log(data);
                //获取表单中的数据
                let formData = data.field;
                $.ajax({
                    url:"/product/insert",
                    type:"post",
                    contentType:"application/json;charset=utf-8",
                    data:JSON.stringify(formData),
                    success:function(res){
                        console.log(res);
                    }
                })
                layer.alert("增加成功", {
                        icon: 6
                    },
                    function() {
                        //关闭当前frame
                        xadmin.close();

                        // 可以对父窗口进行刷新
                        xadmin.father_reload();
                    });
                return false;
            });

    });</script>
</body>

</html>
